<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" width="750px" :clickModalClose="true"
			@confirm="handleSubmit" @close="handleClose" :footershow="true" :confirmButtonText="'下载'">
			<div class="bor">
				<el-table :data="list" size="small" :max-height="620" :show-header="false" ref="tableref"
					@selection-change="onselectionchange" @cell-click="oncellclick" :empty-text="'此物料无附件'">
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column label="名称" prop="name" min-width="100"></el-table-column>
				</el-table>
			</div>
		</popup>
	</div>
</template>
<script lang="ts" setup>
	import type {
		FormInstance
	} from 'element-plus'
	import Popup from '@/components/popup/index.vue'
	import {
		zip
	} from '@/api/tools/code'
	import feedback from '@/utils/feedback'
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef < FormInstance > ()
	const tableref = shallowRef < InstanceType < typeof Popup >> ()
	const popupRef = shallowRef < InstanceType < typeof Popup >> ()
	const mode = ref('add')
	const popupTitle = computed(() => {
		return mode.value == 'edit' ? '查看附件' : '查看附件'
	})
	const list = ref([])
	const handleSubmit = async () => {
		if (JSON.stringify(array.value) === '[]') {
			await feedback.confirm('请选择下载附件',false)
		} else {
			await formRef.value?.validate()
			if (array.value.length != 0) {
				let arr = []
				for (let i = 0; i < array.value.length; i++) {
					arr.push(array.value[i].url)
				}
				onzip(arr)
			}
			popupRef.value?.close()
			emit('success')
		}
	}
	const onzip = (files: any) => {
		zip({
			files: files
		}).then((data: any) => {
			window.open(data.url)
		})
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}

	const setFormData = (data: Record < any, any > ) => {
		list.value = data
	}
	const oncellclick = (val: any) => {
		tableref.value.toggleRowSelection(val)
	}
	const array = ref([])
	const onselectionchange = (val: any) => {
		if (val) {
			array.value = val
		}
	}


	const handleClose = () => {
		emit('close')
	}

	defineExpose({
		open,
		setFormData
	})
</script>
<style lang="scss" scoped>
	.carding {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);

		.main {
			padding: 10px;
		}

		.img {
			width: 70px;
			height: 70px;
			padding: 5px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			width: 70px;
			height: 70px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	::v-deep .el-dialog__footer {
		display: none;
	}
</style>
